<!DOCTYPE html> 
<html> 
<head> 
	<title>EL7a2ony!</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="media/jquery.mobile-1.0.css" />

	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="media/jquery.js"></script>
	<script type="text/javascript" src="media/jquery.mobile-1.0.js"></script>
	<script type="text/javascript" src="media/jquery.ui.map.full.min.js"></script>
	
	<script type="text/javascript" charset="utf-8">
	$('#protector').live("pagecreate", function() {
		$('#map-canvas').gmap({'center': '59.3426606750, 18.0736160278'});
		$('#map-canvas').gmap('displayDirections', { 'origin': "30.061246,31.244361", 'destination': "30.061071,31.24332", 'travelMode': google.maps.DirectionsTravelMode.WALKING });
	});
	</script>
</head> 
<body> 

<!-- Start of first page -->
<div data-role="page" id="home">

	<div data-role="header">
		<h1>El7a2oony</h1>
		<a href="#settings" data-icon="gear" class="ui-btn-right">Settings</a>
	</div><!-- /header -->

	<div data-role="content">	
		<p>
			<!-- <h3>Ask Help From...</h3> -->
			<center>
				<a href="#report-progress" data-role="button" data-theme="e" data-inline="true" style="font-size: 40px; text-transform: uppercase;" data-rel="dialog" data-transition="slideup">El7a2ony!</a>
			<!-- <a href="#report" data-role="button" data-theme="b" data-inline="true" style="font-size: 20px;">Friends</a>
			<a href="#report" data-role="button" data-theme="b" data-inline="true" style="font-size: 20px;">Anyone</a> -->
			</center>
		</p>
		<br />
		<p>
			<ul data-role="listview">
				<li><a href="#report">Report Incident</a></li>
				<li><a href="#requests">See Requests <span class="ui-li-count">5</span></a></li>
			</ul>
		</p>
	</div><!-- /content -->

</div><!-- /page -->


<!-- start of amr -->
<!-- Start of fourth page Amr -->
<div data-role="page" id="requests">
	<div data-role="header">
			<a href="#home" data-icon="delete" data-direction="reverse" class="">Cancel</a>
			<h1>Current Requests</h1>			
	</div><!-- /header -->

	
	<div data-role="content">	
		<ul data-role="listview">
			<li><a href="#single-request" data-rel="dialog" data-transition="slidedown">
				<h3>Request 1</h3>
				<p>[200 m]</p>
			</a></li>
			<li><a href="#single-request" data-rel="dialog" data-transition="slidedown">
				<h3>Request 2</h3>
				<p>[500 m]</p>
			</a></li>
			<li><a href="#single-request" data-rel="dialog" data-transition="slidedown">
				<h3>Request 3</h3>
				<p>[1200 m]</p>
			</a></li>
			<li><a href="#single-request" data-rel="dialog" data-transition="slidedown">
				<h3>Request 4</h3>
				<p>[1900 m]</p>
			</a></li>
			<li><a href="#single-request" data-rel="dialog" data-transition="slidedown">
				<h3>Request 5</h3>
				<p>[2 km]</p>
			</a></li>
		</ul>
	</div><!-- /content -->
</div>


<div id="single-request" data-role="page">
	<div data-role="content">
		<h1>Within 200 m</h1>
		<div data-role="fieldcontain">
			<label for="harassment">Harassment type</label>
			<input type="text" name="harassment" value="Stalking" id="harassment" disabled>
		</div>
		<div data-role="fieldcontain">
			<label for="harassers">No of harassers</label>
			<input type="text" name="harassers" value="1" id="harassers" disabled>
		</div>
		<div data-role="fieldcontain">
			<label for="victims">No of victims</label>
			<input type="text" name="victims" value="1" id="victims" disabled>
		</div>
		<div data-role="fieldcontain">
			<label for="weapons">Weapons</label>
			<select name="slider" data-role="slider" id="weapons" disabled>
			<option value="weapons-no">No</option>
			<option value="weapons-yes" selected>Yes</option>
			</select>

		</div>
		<div data-role="fieldcontain">
			<label for="address">Address</label>
			<textarea cols="40" rows="8" name="address" id="address" disabled>HELP ME PLEASE</textarea>
		</div>
		<center>
		<a href="#home" data-role="button" data-rel="back" data-theme="b" data-inline="true">Accept</a>       
		<a href="#home" data-role="button" data-rel="back" data-theme="c" data-inline="true">Reject</a>
		</center>
	</div>
</div>

<!-- end of amr -->



<!-- Start of third page -->
<div data-role="page" id="report">
	<div data-role="header">
			<a href="#home" data-icon="delete" data-direction="reverse" class="">Cancel</a>
			<h1>Report incident</h1>			
	</div><!-- /header -->

	
	<div data-role="content">	
		<div class="content-primary">
		<form action="#" method="get">	
		<div data-role="fieldcontain">
			<fieldset id="harassment-type-fieldset" class="" data-role="controlgroup" data-type="horizontal">
				<legend>Harassment Type</legend>
				<input type="radio" name="harassment-type" value="" id="radio-choice-1" checked>
				<label for="radio-choice-1">Stalking</label>
				<input type="radio" name="harassment-type" value="" id="radio-choice-2">
				<label for="radio-choice-2">Verbal</label>
				<input type="radio" name="harassment-type" value="" id="radio-choice-3">
				<label for="radio-choice-3">Physical</label>
			</fieldset>
		</div>
				
			<div data-role="fieldcontain">
				<fieldset id="harassers-number" class="" data-role="controlgroup" data-type="horizontal">
					<legend>No. of harassers</legend>
					<input type="radio" name="harassers-count" value="" id="harassers-c-1" checked>
					<label for="harassers-c-1">1</label>
					<input type="radio" name="harassers-count" value="" id="harassers-c-2">
					<label for="harassers-c-2">&lt; 4</label>
					<input type="radio" name="harassers-count" value="" id="harassers-c-3">
					<label for="harassers-c-3">&gt;= 4</label>	
				</fieldset>
		</div>
		
			<div data-role="fieldcontain">
				<fieldset id="victims-number" class="" data-role="controlgroup" data-type="horizontal">
					<legend>No. of victims</legend>
					<input type="radio" name="victims-count" value="" id="victims-c-1" checked>
					<label for="victims-c-1">1</label>
					<input type="radio" name="victims-count" value="" id="victims-c-2">
					<label for="victims-c-2">&lt; 4</label>
					<input type="radio" name="victims-count" value="" id="victims-c-3">
					<label for="victims-c-3">&gt;= 4</label>	
				</fieldset>
			</div>
			
			<div data-role="fieldcontain">
				<label for="select-choice-10" class="select">Weapons?</label>
				<select name="slider" data-role="slider" id="select-choice-10">
				<option value="weapons-yes">No</option>
				<option value="weapons-no">Yes</option>
				</select>
			</div>
		
		<div data-role="fieldcontain">
			<label for="notes">Notes:</label>
			<textarea cols="40" rows="8" name="notes" id="notes"></textarea>
		</div>
		
		<p>
			<center>
			<a  href="#report-progress" data-role="button" data-theme="b" data-inline="true" style="font-size: 20px;" data-rel="dialog" data-transition="slideup">Submit report</a>
			<a  data-role="button" data-theme="b" data-inline="true" style="font-size: 20px;">Call Police</a>
			</center>
		</p>
		</form></div>
	</div><!-- /content -->
</div>

<div id="report-progress" data-role="page">
	<div data-role="header">
		<h1>Incident reported</h1>
		<a href="#report-respondants"data-icon="arrow-r" data-theme="e" data-rel="dialog" data-transition="slideup">Next</a>
	</div>
	<div data-role="content">
		<h1>50 requests sent</h1>
		<h3>Waiting for respondents</h3>
	</div>
</div>

<div id="report-respondants" data-role="page">
	<div data-role="header">
		<h1>Incident reported</h1>
	</div>
	<div data-role="content">
		<h1>50 requests sent</h1>
		<h3>Waiting for respondents</h3>
		<a href="#protector" data-role="button" data-theme="b">3 coming</a>
	</div>
</div>


<!-- Start of second page -->
<div data-role="page" id="settings">
	<div data-role="header">
			<a href="#home" data-icon="delete" data-direction="reverse" class="">Cancel</a>
			<h1>Settings</h1>
			<a href="#home" data-icon="check" data-theme="e">Save</a>
	</div><!-- /header -->

	<div data-role="content">	
		<div class="content-primary">
				<form action="#" method="get">

					<p>Settings for the application</p>

					<div data-role="fieldcontain">
			         <label for="name">Text Input:</label>
			         <input type="text" name="name" id="name" value=""  />
					</div>

					<div data-role="fieldcontain">
					<label for="textarea">Textarea:</label>
					<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
					</div>

					<div data-role="fieldcontain">
			         <label for="search">Search Input:</label>
			         <input type="search" name="password" id="search" value=""  />
					</div>

					<div data-role="fieldcontain">
						<label for="slider2">Flip switch:</label>
						<select name="slider2" id="slider2" data-role="slider">
							<option value="off">Off</option>
							<option value="on">On</option>
						</select>
					</div>

					<div data-role="fieldcontain">
						<label for="slider">Slider:</label>
					 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
					</div>

					<div data-role="fieldcontain">
					<fieldset data-role="controlgroup">
						<legend>Choose as many snacks as you'd like:</legend>
						<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
						<label for="checkbox-1a">Cheetos</label>

						<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
						<label for="checkbox-2a">Doritos</label>

						<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
						<label for="checkbox-3a">Fritos</label>

						<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
						<label for="checkbox-4a">Sun Chips</label>
				    </fieldset>
					</div>

					<div data-role="fieldcontain">
					<fieldset data-role="controlgroup" data-type="horizontal">
				    	<legend>Font styling:</legend>
				    	<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
						<label for="checkbox-6">b</label>

						<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
						<label for="checkbox-7"><em>i</em></label>

						<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
						<label for="checkbox-8">u</label>
				    </fieldset>
					</div>

					<div data-role="fieldcontain">
					    <fieldset data-role="controlgroup">
					    	<legend>Choose a pet:</legend>
					         	<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
					         	<label for="radio-choice-1">Cat</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
					         	<label for="radio-choice-2">Dog</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
					         	<label for="radio-choice-3">Hamster</label>

					         	<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
					         	<label for="radio-choice-4">Lizard</label>
					    </fieldset>
					</div>

					<div data-role="fieldcontain">
					    <fieldset data-role="controlgroup" data-type="horizontal">
					     	<legend>Layout view:</legend>
					         	<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
					         	<label for="radio-choice-c">List</label>
					         	<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
					         	<label for="radio-choice-d">Grid</label>
					         	<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
					         	<label for="radio-choice-e">Gallery</label>
					    </fieldset>
					</div>

					<div data-role="fieldcontain">
						<label for="select-choice-1" class="select">Choose shipping method:</label>
						<select name="select-choice-1" id="select-choice-1">
							<option value="standard">Standard: 7 day</option>
							<option value="rush">Rush: 3 days</option>
							<option value="express">Express: next day</option>
							<option value="overnight">Overnight</option>
						</select>
					</div>

					<div data-role="fieldcontain">
						<label for="select-choice-3" class="select">Your state:</label>
						<select name="select-choice-3" id="select-choice-3">
							<option value="AL">Alabama</option>
							<option value="AK">Alaska</option>
							<option value="WA">Washington</option>
							<option value="WV">West Virginia</option>
							<option value="WI">Wisconsin</option>
							<option value="WY">Wyoming</option>
						</select>
					</div>

					<div data-role="fieldcontain">
						<label for="select-choice-a" class="select">Choose shipping method:</label>
						<select name="select-choice-a" id="select-choice-a" data-native-menu="false">
							<option>Custom menu example</option>
							<option value="standard">Standard: 7 day</option>
							<option value="rush">Rush: 3 days</option>
							<option value="express">Express: next day</option>
							<option value="overnight">Overnight</option>
						</select>
					</div>

				<div class="ui-body ui-body-b">
				<fieldset class="ui-grid-a">
						<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
						<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
			    </fieldset>
				</div>
			</form>
			</div><!--/content-primary -->
	</div><!-- /content -->
</div><!-- /page -->

<!-- start of maps-->
<div data-role="page" id="protector">
	<div data-role="header"><h1 id="map-view-title">Protector Location</h1></div>
	<div data-role="content"> 
		<div id="map-canvas" style="height: 400px;">
			<!-- map loads here... -->
		</div>
	</div>
</div>
<!-- end of maps -->


</body>
</html>